import React, { useState, useLayoutEffect } from "react";
// todo useLayoutEffect跟useEffect类似的，会在componentDidMount和componentDidUpdate之后同步调用,会阻塞代码执行, 优先于useEffect执行
// todo 只有当加载完毕以后需要改变dom样式的时候用，可以避免页面抖动
// todo 绝大部分情况下，推荐使用useEffect

const App = () => {
  const [tst, setTst] = useState(0);

  useLayoutEffect(() => {
    setTst(100);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      <div
        style={{
          width: 300,
          height: 300,
          background: "red",
          transform: "translateX(" + tst + "px)",
        }}
      ></div>
    </>
  );
};

export default App;
